<!-- 折线图 -->
<template>
  <div style="position: relative;">
    <p style="color: var(--text);">{{ chartTitle }}</p>
    <div :style="{ height: '450px', width: '100%' }" style="width: 100%;background-color: var(--background);" ref="chartEl"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, markRaw, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

const chartEl = ref<HTMLDivElement>()

const myChart = ref()
// 可以根据父组件传过来的数据生成折线图
const props = defineProps({
  chartTitle: {
    // legend标题数据
    type: String,
    default: () => {
      return ''
    }
  },
  legendData: {
    // legend标题数据
    type: Array,
    default: () => {
      return []
    }
  },
  xAxisData: {
    // xAxis数据
    type: Array,
    default: () => {
      return []
    }
  },
  seriesData: {
    // 折线图数据
    type: Array,
    default: () => {
      return []
    }
  }
})

watch(
  [() => props.xAxisData, () => props.seriesData],
  (val) => {
    echartLine()
  },
  {
    deep: true,
    immediate: true
  }
)

function echartLine() {
  if (!chartEl.value) return // 判断是否有元素
  if (!myChart.value) {
    // 判断是否第一次加载
    myChart.value = markRaw(echarts.init(chartEl.value as HTMLDivElement))
  }
  myChart.value.clear();
  myChart.value.setOption({
    legend: {
      type: 'scroll',
      data: props.legendData,
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt:any) {
        return [pt[0], '10%'];
      }
    },
    xAxis: {
      type: 'category',
      data: props.xAxisData,
      axisLabel: {
        show: true,
      },
      axisTick: {
        show: false // 是否显示坐标轴刻度
      },
      boundaryGap: false // 让起点从 x 轴的 0 坐标开始
    },
    yAxis: {
      type: 'value',
      scale: false, // 摆脱 0 值比例
      boundaryGap: [0, '100%'],
      min: 'dataMin', //取最小值为最小刻度
      max: 'dataMax', //取最大值为最大刻度
    },
    series: props.seriesData
  })
}
</script>

<style scoped lang="scss"></style>
